<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,
			html,
			#a {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}
			
			#b,
			#c {
				width: 50%;
				height: 40%;
				border: 1px solid red;
			}
			
			#d {
				width: 50%;
				height: 50%;
				background-color: rosybrown;
			}
		</style>
	</head>

	<body>
		<div id="a">
			<div id="b">

			</div>
			<div id="c">
				<div id="d">

				</div>
			</div>
		</div>
		<input type="button" name="" id="" value="231" />
	</body>
	<script type="text/javascript">
		var a = document.getElementById("a");
		var b = document.getElementById("b");
		var c = document.getElementById("c");
		var d = document.getElementById("d");
		c.onclick = function(e) {
			e.stopPropagation();
		}
		document.getElementsByTagName("body")[0].onclick = function() {
			c.style.display = "none";
		}
		document.getElementsByTagName("input")[0].onclick = function(e){
			c.style.display = "block";
			e.stopPropagation();
		}
		b.addEventListener("",function(e){
			console.log(e);
		})
	</script>

</html>